<template>
	<div class="wraper" :class="{padTop:isIphoneX,iphone:isIphone,error:error}">
		<div class="nav-bar">
			<div class="arrow" @click="goBack"></div>
		</div>
		<div class="content">
			<h1 @click="clearStorage">{{$t('buyType-key4')}}</h1>
			<div class="types">
				<div class="item" v-for="item in list" @click="goChoice(item)">
					<div class="title">
						<div class="left">
							<img :src="item.icon">
							<span class="name">{{item.name}}</span>
							<span class="recommend" v-if="item.recommend">{{$t('buyType-key5')}}</span>
						</div>
						<b class="choice" :class="{on:item.isSelected}"></b>
					</div>
					<div class="desc" v-if="item.isSelected">
						<div class="ele"><span>{{$t('buyType-key6')}}</span><b>￥{{amountOfMoney}}</b></div>
						<div class="ele"><span>{{$t('buyType-key7')}}</span><b>{{account+name}}</b></div>
						<p>请使用<span>{{userName}}</span>{{item.name}}付款，<span>不要备注信息</span></p>
					</div>
				</div>
			</div>
			<van-button @click="dialogOnce" loading-text="商家匹配中..." :loading="loading" type="primary" color="#1C4D7F">去支付</van-button>
			<div class="c-info">
				<p>·{{OTCWorkTime}}</p>
				<p>·所有OTC商家均已经过认证并质押保证金，请放心兑换</p>
			</div>
		</div>
		<!-- 下单有一次提示 -->
		<transition name="fade">
			<div class="dialog" v-if="onceDialog">
				<div class="box" @click.prevent="stop">
					<h1>T+1安全保护</h1>
					<p class="c">快捷买币购入的数字货币，在24小时内不得用于快捷卖币、提币、口令红包，但不影响交易。到期后限制将自动解除。</p>
					<van-checkbox class="buyTypeCheck checkBox" v-model="dialogChecked">我已知晓</van-checkbox>
					<div class="btns">
						<div class="left cancel" @click="onceDialog=false;">取消</div>
						<div class="right comfirm" @click="goNext"><span :class="{on:dialogChecked}">确认下单</span></div>
					</div>
				</div>
			</div>
		</transition>
	</div>
</template>
<script src="./buyType.js"></script>
<style scoped lang="scss">
	@import './buyType.scss';
</style>
<style>
	.buyTypeCheck .van-checkbox__label{
		color: #6D7B8F;
	}
	.buyTypeCheck .van-checkbox__icon--round .van-icon{
		border-radius: 3px;
	}
	.buyTypeCheck .van-checkbox__icon .van-icon{
		width: 1.1em;
		height: 1.1em;
		line-height: 1.1;
	}
	.sellType-mark{
		background-color: rgba(0,0,0,.5);
	}
	.van-dialog.sellType-dialog{
		width: 5.07rem;
		border-radius: 0.22rem;
	}
	.van-dialog.sellType-dialog .van-dialog__header{
		padding-top: 0.4rem;
		font-size: 0.29rem;
		color: #2E3D4D;
		font-weight: 500;
	}
	.van-dialog.sellType-dialog .van-dialog__message{
		font-size: 0.25rem;
		padding: 0.1rem 0 0.35rem 0;
		color: #2E3E4D;
	}
	.van-dialog.sellType-dialog .van-button{
		height: 0.8rem;
		line-height: 0.8rem;
		font-size: 0.32rem;
	}
	.van-dialog.sellType-dialog .van-dialog__confirm{
		font-weight: 600;
	}
	
</style>